<!-- 上传课件列表 -->
<template>
	<div class="container">
		<div class="course">
			<div class="course-tools">
				<div class="period-title">
					{{ selectPeriod.periodName }}
				</div>
				<div class="flex">
					<el-upload class="mr-3" :show-file-list="false" accept="video/*" action="http://101.43.71.61:8080/minio/upload"
					 :on-success="addMainFile" :headers="myHeader" :on-progress="uploadPeriodProgress" :disabled="uploadPeriodLoading">
						<el-button size="mini" :loading="uploadPeriodLoading" @click="isActiveId = 1;">上传课件</el-button>
					</el-upload>
					<el-upload class="mr-3" :show-file-list="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" action="http://101.43.71.61:8080/minio/upload"
					 :on-success="addAnnex" :headers="myHeader" :on-progress="uploadAnnexProgress" :disabled="uploadAnnexLoading">
						<el-button size="mini" :loading="uploadAnnexLoading" @click="isActiveId = 1;">上传附件</el-button>
					</el-upload>
					<div>
						<el-button v-for="(item,index) in List" :key="index" size="mini" class="Main" :class="{active:item.title === isActive}"
						 @click="changeHandle(item)">{{ item.title }}
						</el-button>
					</div>
				</div>
			</div>
			<div class="table-container" v-show="isActiveId==1">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="coursewareUrl" label="文件名" show-overflow-tooltip>
						<template slot-scope="scope">
							<a class="file-name" @click="findFile(scope.row)">{{ getFileName(scope.row.coursewareUrl) }}</a>
						</template>
					</el-table-column>
					<el-table-column prop="isFirst" label="类别" :formatter="courseTypeFormatter"></el-table-column>
					<el-table-column prop="createTime" label="上传日期" :formatter="dataFormatter">
					</el-table-column>
					<el-table-column prop="operator" label="操作" width="80">
						<template slot-scope="scope">
							<el-button type="text" @click="deleteCourseware(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="table-container" v-show="isActiveId==4" style="background-color: white;">
				 <el-button type="primary" @click="$router.push({'path':'/chapterTest',query:{'Id':selectPeriod.id}})" style="background-color: #00DBCF;border: none;" size="small">添加测试</el-button>
			     <div class="question" v-for="(item, idx) in questions" :key="idx">
			     
			     	<p style="display: flex;">{{ `${idx+1}.[${item.name}](${item.score})`}}
			     		<div v-html="`${md(item.content)}`"></div>
			     	</p>
			     	<div v-for="(Item,indx) in item.optionsList" :key="indx+'hh'" style="display: flex;">
			     		<div v-if="item.topicId==1">
			     			<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;">
			     				<div style="display: flex;">{{letter[indx]}}:
			     					<div v-html="`${md(Item.content)}`"></div>
			     				</div>
			     			</el-radio>
			     		</div>
			     		<div v-if="item.topicId==2">
			     			<el-checkbox-group v-model="item.answerList">
			     				<el-checkbox :label="Item.id" :key="indx"  style="margin-top: 1.25rem;">
			     					<div v-html="`${md(Item.content)}`"></div>
			     				</el-checkbox>
			     			</el-checkbox-group>
			     		</div>
			     	</div>
			     	<div v-if="item.topicId==3">
			     
			     		<div v-for="(Item,indx) in exam" :key="indx+'hh'" style="display: flex;">
			     			<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;" >
			     				<div>{{letter[indx]}}:{{Item.value}}
			     				</div>
			     			</el-radio>
			     		</div>
			     	</div>
			     	<div v-if="item.topicId==4" style="height: 22.5rem;">
			     		<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
			     	</div>
			     	<div v-if="item.topicId==5" style="height: 22.5rem;">
			     		<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
			     	</div>
			     
			     
			     </div>
			</div>
			
		</div>
		<player-video-dialog v-if="isShowPlayerVideoDialog" :visible="isShowPlayerVideoDialog" :video-url="selectData.coursewareUrl"
		 @close="isShowPlayerVideoDialog = false" />
	</div>
</template>

<script>
	import {
		addCoursewareForPeriod,
		deleteCourseware,
		getCoursewareByPeriodId,
		getChapterTestByPeriodId
	} from "../../../../../api/education/courseware.js";
	import PlayerVideoDialog from "../playerVideoDialog";
    import marked from "marked";
	export default {
		name: 'UploadCoursewareList',
		components: {
			PlayerVideoDialog
		},
		props: {
			selectPeriod: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch: {
			selectPeriod: {
				handler() {
					this.isActiveId=1;
					this.getCoursewareByPeriodId();
					
					// this.changeHandle(this.List[0]);
				}
			}
		},
		created() {
			this.getCoursewareByPeriodId()
			
		},
		data() {
			return {
				isActive: "上传主件",
				isActiveId: 1,
				myHeader: {
					token: window.localStorage.getItem("token")
				},
				List: [{
					id: 4,
					title: "课时测试"
				}],
				tableData: [],
				isShowPlayerVideoDialog: false,
				selectData: {},
				uploadPeriodLoading: false,
				uploadAnnexLoading: false,
				questions:[],
				question:[],
				textname:'',
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				exam:[
					{
						value:"正确",
						id:1
					},
					{
						value:"错误",
						id:0
					}
				],
			}
		},
		methods: {
			md(content) {
				return marked(content);
			},
			getFileName(fileName) {
				const arr = fileName.split('/')
				return arr[arr.length - 1]
			},
			//课程检测
			changeHandle(Item) {
				if (Item.id === 4) {
					this.isActiveId = 4;
					var parmas={
						periodId:this.selectPeriod.id
					}
					getChapterTestByPeriodId(this.qs.stringify(parmas)).then(e=>{
						console.log(e);
						this.question = e.data.data;
						this.textname = this.question.testPaper.name;
						this.questions = e.data.data.questions.map(q => {
							return {
								...q,
								answerList: [],
							}
						})
						console.log(this.questions);
					})
					
					// this.$router.push({path:"/chapterTest",query:{id:this.selectPeriod.id}})
				}
				// this.isActiveId = Item.id;
				this.isActive = Item.title;
			},
			addMainFile(data) {
				addCoursewareForPeriod({
					coursewareType: 0,
					coursewareUrl: data.data.url,
					isFirst: 1,
					periodId: this.selectPeriod.id
				}).then(() => {
					this.getCoursewareByPeriodId()
				}).finally(() => {
					this.uploadPeriodLoading = false
				})
			},
			addAnnex(data) {
				addCoursewareForPeriod({
					coursewareType: 0,
					coursewareUrl: data.data.url,
					isFirst: 0,
					periodId: this.selectPeriod.id
				}).then(() => {
					this.getCoursewareByPeriodId()
				}).finally(() => {
					this.uploadAnnexLoading = false
				})
			},
			getCoursewareByPeriodId() {
				getCoursewareByPeriodId({
					periodId: this.selectPeriod.id,
					isTeacher: true
				}).then(res => {
					this.tableData = res.data.data
				})
			},
			findFile(file) {
				const video = ['.mp4', '.m4v', '.avi']
				if (video.some(item => file.coursewareUrl.endsWith(item))) {
					this.isShowPlayerVideoDialog = true
				} else {
					this.$notify.info('功能开发中,敬请期待')
				}
				this.selectData = file

			},
			dataFormatter(row, col, cellValue) {
				return cellValue ? cellValue.split('T').join(' ') : '-';
			},
			courseTypeFormatter(row, col, cellValue) {
				const obj = {
					1: '课件',
					0: '附件'
				}
				return obj[cellValue] || '-';
			},
			deleteCourseware(data) {
				this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							deleteCourseware(data.id, {}).then(() => {
								done()
								instance.confirmButtonLoading = false;
								this.getCoursewareByPeriodId();
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
							}).catch(() => {
								done()
								instance.confirmButtonLoading = false;
								this.$message({
									type: 'error',
									message: '删除失败!'
								});
							})
						} else {
							done();
						}
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			uploadPeriodProgress(event) {
				if (event.loaded !== event.total) {
					this.uploadPeriodLoading = true
				}
			},
			uploadAnnexProgress(event) {
				if (event.loaded === event.total) {
					this.uploadAnnexLoading = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.capiter{
	  font-size: 0.875rem;
	  left: 0rem;
	}
	.flex {
		display: flex;
	}

	.mr-3 {
		margin-right: 1rem;
	}

	.container {
		flex: 1;
		background-color: #f4fafe;
	}

	.active {
		background-color: #03d3bd;
		color: white;
		border: none;
	}

	.course {
		border-left: 1px solid #f4fafe;


		.course-tools {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 40px;
			padding: 0 10px;
			border-bottom: 1px solid #eeeeee;
			background-color: #ffffff;
		}

		.table-container {
			padding: 8px;
			background-color: #f4fafe;
			min-height: 100vh;

			.file-name {
				cursor: pointer;

				&:hover {
					color: #0bbbaa;
				}
			}

		}

		.upload-period-container {
			background-color: #f3f3f3;
			height: 25rem;
			margin-bottom: 1.25rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.upload-annex-container {
			background-color: #ffffff;
			height: 25rem;
			margin-left: 0.625rem;
			margin-right: 0.625rem;
			margin-bottom: 1.25rem;
			overflow: hidden;
			padding: 8px;
		}

	}
	.question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}
	.question .el-radio-group {
		display: flex;
		flex-direction: column;
	}
	.el-radio-group .el-radio {
		height: 40px;
		line-height: 40px;
	}
	
	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}
	
	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}
	
	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}
	
	.question .no {
		background-color: #fdf6ec;
		color: #e7ac95;
	}
	.el-radio{
		display: flex;
		margin-top: 1.875rem;
	}
	
</style>
